<template>
  <div class="follow-view">
    <van-nav-bar title="我的关注" left-arrow @click-left="onClickLeft" />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="已显示全部关注"
      @load="loadData"
    >
      <div
        class="content-list"
        v-for="(item, index) in loadedData"
        :key="index"
      >
        <div class="user-left" @click="goToUserInside(item)">
          <div class="user-img">
            <img class="auto-img" :src="item.thumb" alt="" />
          </div>
          <div class="user-name">{{ item.login }}</div>
          <div class="user-male" :class="{ manstyle: item.gender == 'M' }">
            {{ item.gender == "M" ? "♂" : item.gender == "F" ? "♀" : "" }}
            {{ item.age }}
          </div>
        </div>
        <div class="user-right" @click="cancelFollow(item)">已关注</div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
  name: "userFollowed",
  data() {
    return {
      //显示加载提示
      loading: false,
      //是否加载数据完成
      finished: false,
      //总数据量
      myData: [],
      //加载数据量
      count: 10,
      //数据偏移量
      offset: 0,
      //已加载的数据量
      loadedData: [],
      //函数防抖定时器序号
      timer: null,
    };
  },
  activated() {
    //创建初始化数据
    this.myData = JSON.parse(window.localStorage.getItem("followedData"));
    this.loadData();
  },
  methods: {
    initLoad() {
      let data = this.myData.slice(this.offset, this.offset + this.count);
      this.loadedData.push(...data);
      this.offset += this.count;
      this.loading = false;
      setTimeout(() => {
        //如果本次数据加载不足this.count【30条数据】, 则说明数据已加载完毕, 则将this.finished设置为true
        if (data.length < this.count) {
          this.finished = true;
        } else {
          this.laoding = true;
        }
      }, 600);
    },
    //每次触底加载数据方法
    loadData() {
      //函数防抖控制触发频率
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.timer = null;
        this.initLoad();
      }, 1000);
    },
    //取消关注
    cancelFollow(item) {
      this.$dialog
        .confirm({
          title: "确定要取消关注吗?",
        })
        .then(() => {
          // on confirm
          this.loadedData.forEach((item2, index) => {
            if (item2 == item) {
              this.loadedData.splice(index, 1);
            }
          });
          window.localStorage.setItem(
            "followedData",
            JSON.stringify(this.loadedData)
          );
        })
        .catch(() => {
          // on cancel
        });
    },
    //前往个人主页
    goToUserInside(item) {
      if (this.$route.name != "userInside") {
        this.$router.push({
          name: "userInside",
          params: { id: item.id },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.follow-view {
  padding: 0 10px 50px;
  ::v-deep .van-nav-bar__arrow {
    color: #000;
    font-size: 20px;
    left: -10px;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: 600;
    font-size: 18px;
  }
  .content-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    .user-left {
      display: flex;
      align-items: center;
      .user-img {
        width: 40px;
        height: 40px;
        background-color: red;
        border-radius: 999px;
        overflow: hidden;
      }
      .user-name {
        margin: 0 10px;
      }
      .user-male {
        width: 40px;
        height: 16px;
        text-align: center;
        line-height: 16px;
        background-color: rgb(251, 109, 142);
        border-radius: 999px;
        color: #fff;
        &.manstyle {
          background-color: rgb(25, 140, 228);
        }
      }
    }
    .user-right {
      width: 50px;
      height: 22px;
      flex: 0 0 50px;
      border-radius: 999px;
      text-align: center;
      background-color: #eee;
      line-height: 22px;
      font-weight: 600;
    }
  }
}
</style>